<template>
  <div>
    <div class="input">
    <div class="emoji">
      <img
        @click="show_emoji"
        src="../../../assets/img/square/face_black.svg"
        alt=""
      />
    </div>
    <textarea
      class="msg"
      name="input"
      id=""
      cols="35"
      rows="2"
      v-model="message"
    ></textarea>
    <button class="send" @click="send">send</button>
  </div>
  <div v-show="isShowEmoji" class="show-emoji">
    <img
      v-for="(item, index) in list"
      :src="
        `https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif`
      "
      alt=""
      @click="choose_emoji(item,index)"
    />
  </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      isShowEmoji: false,
      message: "",
      list: [
        "微笑",
        "撇嘴",
        "色",
        "发呆",
        "得意",
        "流泪",
        "害羞",
        "闭嘴",
        "睡",
        "大哭",
        "尴尬",
        "发怒",
        "调皮",
        "呲牙",
        "惊讶",
        "难过",
        "酷",
        "冷汗",
        "抓狂",
        "吐",
        "偷笑",
        "可爱",
        "白眼",
        "傲慢",
        "饥饿",
        "困",
        "惊恐",
        "流汗",
        "憨笑",
        "大兵",
        "奋斗",
        "咒骂",
        "疑问",
        "嘘",
        "晕",
        "折磨",
        "衰",
        "骷髅",
        "敲打",
        "再见",
        "擦汗",
        "抠鼻",
        "鼓掌",
        "糗大了",
        "坏笑",
        "左哼哼",
        "右哼哼",
        "哈欠",
        "鄙视",
        "委屈",
        "快哭了",
        "阴险",
        "亲亲",
        "吓",
        "可怜",
        "菜刀",
        "西瓜",
        "啤酒",
        "篮球",
        "乒乓",
        "咖啡",
        "饭",
        "猪头",
        "玫瑰",
        "凋谢",
        "示爱",
        "爱心",
        "心碎",
        "蛋糕",
        "闪电",
        "炸弹",
        "刀",
        "足球",
        "瓢虫",
        "便便",
        "月亮",
        "太阳",
        "礼物",
        "拥抱",
        "强",
        "弱",
        "握手",
        "胜利",
        "抱拳",
        "勾引",
        "拳头",
        "差劲",
        "爱你",
        "NO",
        "OK",
        "爱情",
        "飞吻",
        "跳跳",
        "发抖",
        "怄火",
        "转圈",
        "磕头",
        "回头",
        "跳绳",
        "挥手",
        "激动",
        "街舞",
        "献吻",
        "左太极",
        "右太极"
      ]
    };
  },
  methods: {
    send() {
      let msg = this.message;
      if (!msg.trim().length) {
        return;
      }
      this.$emit("send", msg);
      this.message = "";
      if(this.isShowEmoji){
      this.isShowEmoji = false
      }
    },
    //显示表情选择
    show_emoji() {
      this.isShowEmoji = !this.isShowEmoji;
    },
    //选择表情
    choose_emoji(item,index){
      console.log(item,index)
      this.message += `[${item}]`
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input {
  padding: 5px 5px;
  background-color: #eee;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 2;
}
.emoji {
  width: 40px;
  height: 40px;
}
.emoji img {
  width: 100%;
  height: 100%;
}
.msg {
  border: 0px;
  margin-left: 5px;
  font-size: 16px;
}
.send {
  height: 30px;
  flex: 1;
  text-align: center;
  background-color: green;
  color: white;
  line-height: 30px;
  border-radius: 5px;
}
.show-emoji{
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 44px;
}
</style>
